<%--
  Created by IntelliJ IDEA.
  User: TLY
  Date: 2022/12/8
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="./common/taglibs.jsp" %>
${jquery_js}
${validate_jquery_js}

<html>
<head>
    <title>理发店业务管理系统</title>
    <link type="text/css" rel="stylesheet" href="${ctx}/css/style.css"/>
  <%--  <script type="text/javascript" src="${ctx}/scripts/index.js"></script>--%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
    <style>
        label{
            color:red
        }
    </style>
</head>
<body>
<div id="header" class="wrap">

    <div class="navbar">
        <ul class="clearfix">
            <li><a href="${ctx}/index.jsp">首页</a></li>
            <li><a href="${ctx}/user/getpageusers">会员管理</a></li>
            <li><a href="${ctx}/staff/getstaffs">职工管理</a></li>
            <li  class="current"><a href="${ctx}/order/getorders">订单管理</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="welcome wrap">
        管理员${admin.name}您好，欢迎回到管理后台。
    </div>
</div>

<div id="main" class="wrap">
    <div id="menu-mng" class="lefter">
        <div class="box">
            <dl>
       <%--         <dt><a href="${ctx}/user/getpageusers">会员管理</a></dt>
                <dd><em></em><a href="${ctx}/user/adduser">新增会员</a></dd>
                <dt>职工管理</dt>
                <dd><em></em><a href="${ctx}/pageproductclass">新增职工</a></dd>--%>
           <dt>订单管理</dt>
           <dd><em></em><a href="${ctx}/order/addorder">新增订单</a></dd>
            </dl>
        </div>
    </div>
    <div class="main">
        <h2>修改订单</h2>
        <div class="manage">
            <form action="#" id="myform">

                <table id="mytable" class="list">
                    <tr hidden class="mytr">
                        <td><input type="text" name="orderid" id="orderid" value="${updateorder.orderid}"/></td>
                    </tr>


                    <tr class="mytr">
                        <td class="field">会员id(*)：</td>
                        <td><input type="text" name="userid" id="userid" value="${updateorder.user.userid}"/></td>
                        <td>
                            <input type="button" name="button" value="追加消费" onclick="addchoice()"/>
                            <input type="button" name="button"  value="撤销消费" onclick="delchoice()"/>
                        </td>
                    </tr>

                    <tr id="hidfirsttr" hidden>
                     <td class="first  myfield" width="130px">选择消费项目：

                            <select name="skillid" onchange="change(this)" required>
                                <option value="">请选择</option>
                                <c:forEach items="${skills}" var="i">
                                    <option value="${i.skillid}">${i.skillname} <span>${i.price}元</span></option>
                                </c:forEach>


                            </select>

                        </td>
                     <td class="w4">
                            选择职工:
                            <select name="staffid">
                                <option value="">请选择</option>
                                <c:forEach items="${staffs}" var="i">
                                    <option value="${i.staffid}">${i.staffname}</option>
                                </c:forEach>

                            </select>
                        </td>

                 <td class="field">价格: <span>0</span>元

                        </td>
                    </tr>



                    <c:forEach items="${updateorder.orderdetails}" var="i" end="0">
                        <tr id="firsttr">
                            <td class="first  myfield" width="130px">选择消费项目：
                                <select name="skillid" onchange="change(this)">
                                    <option value="">请选择</option>
                                    <c:forEach items="${skills}" var="j">
                                        <option value="${j.skillid}"
                                                <c:if test="${i.skill.skillid==j.skillid}">
                                                    selected
                                                </c:if>
                                        >${j.skillname}
                                            <span&nbsp;&nbsp;&nbsp; hidden>${j.price}元</span></option>
                                    </c:forEach>


                                </select>


                            </td>
                            <td class="w4">
                                选择职工:
                                <select name="staffid">
                                    <option value="">请选择</option>
                                    <c:forEach items="${staffs}" var="t">
                                        <c:forEach items="${t.skills}" var="s">
                                            <c:if test="${s.skillid==i.skill.skillid}">
                                                <option value="${t.staffid}"
                                                        <c:if test="${i.staff.staffid==t.staffid }">
                                                            selected
                                                        </c:if>
                                                >${t.staffname}</option>
                                            </c:if>

                                        </c:forEach>
                                    </c:forEach>
                                </select>
                            </td>

                            <td class="field">价格: <span>${i.skill.price}</span>元</td>

                        </tr>


                    </c:forEach>

                    <c:forEach items="${updateorder.orderdetails}" var="ii" begin="1">
                        <tr class="addtr">
                            <td class="first  myfield" width="130px">选择消费项目：
                                <select name="skillid" onchange="change(this)">
                                    <option value="">请选择</option>
                                    <c:forEach items="${skills}" var="jj">
                                        <option value="${jj.skillid}"
                                                <c:if test="${ii.skill.skillid==jj.skillid}">
                                                    selected
                                                </c:if>
                                        >${jj.skillname}
                                            <span&nbsp;&nbsp;&nbsp; hidden>${jj.price}元</span></option>
                                    </c:forEach>


                                </select>


                            </td>
                            <td class="w4">
                                选择职工:
                                <select name="staffid">
                                    <option value="">请选择</option>
                  <c:forEach items="${staffs}" var="tt">
                               <c:forEach items="${tt.skills}" var="ss">
                                   <c:if test="${ss.skillid==ii.skill.skillid}">
                                   <option value="${tt.staffid}"
                                           <c:if test="${ii.staff.staffid==tt.staffid }">
                                               selected
                                           </c:if>
                                   >${tt.staffname}</option>
                                   </c:if>

                             </c:forEach>
                         </c:forEach>

                     <%--               <c:forEach items="${staffs}" var="t">
                                        <option value="${t.staffid}"
                                                <c:if test="${i.staff.staffid==t.staffid  }">
                                                    selected
                                                </c:if>
                                        >${t.staffname}</option>
                                    </c:forEach>--%>
                                </select>
                            </td>

                            <td class="field">价格: <span>${ii.skill.price}</span>元</td>

                        </tr>


                    </c:forEach>


                    <tr id="lasttr">
                        <td class="c"> 总价<span id="cost">${updateorder.cost}</span>元</td>
                        <td> 是否支付：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <br>
                            <input type="radio" value="0" name="ispayment"  <c:if test="${updateorder.ispayment==0}"> checked </c:if>>未支付
                            <input type="radio" value="1" name="ispayment"  <c:if test="${updateorder.ispayment==1}"> checked </c:if>>已支付

                        </td>

                        <td><label class="ui-blue"><input type="button" name="button" id="btn" value="修改"/></label></td>
                    </tr>
                </table>


            </form>
        </div>
    </div>
    <div class="clear">

    </div>

</div>

<div id="footer">
    安徽大学江淮学院 2019级 计算机科学与技术专业 陶龙宇 学号JB194033
</div>
<script type="text/javascript">
    $(function () {

        $("#btn").click(function () {

            if($("#myform").valid()){
            var skillids = []
            $("select[name='skillid']").each(function (j, item) {
                skillids.push(document.getElementsByName("skillid")[j].value);
            });

            var staffids = [];
            $("select[name='staffid']").each(function (j, item) {
                staffids.push(document.getElementsByName("staffid")[j].value);
            });

            var userid = $("#userid").val()
            var orderid = $("#orderid").val()


            var ispayment = $("input[name='ispayment']:checked").val()
            var totalprice = parseInt(document.getElementById("cost").textContent)




            $.ajax({
                url: "${ctx}/order/doupdateaddorder",
                type: "post",
                traditional: true,
                data: {
                    "orderid":orderid,
                    "skillids": skillids,
                    "staffids": staffids,
                    "cost": totalprice,
                    "userid": userid,
                    "ispayment": ispayment
                },
                dataType: "json",
                success: function (result) {
                    alert(result.msg)
                    if (result.code == 10000) {

                        location.href = "${ctx}/order/getorders";
                    }
                },
                error: function () {
                    alert("请联系管理员")
                },


            })

        }
        })



        $("#myform").validate({
            rules:{
                "userid":{
                    required:true
                },
                "skillid":{
                    required:true
                },
                "staffid":{
                    required:true
                },
                "ispayment":{
                    required:true
                }
            },
            messages:{
                "userid":{
                    required:"*请输入会员id"
                },
                "skillid":{
                    required:"请选择服务项目"
                },
                "staffid":{
                    required:"请选择职工"
                },
                "ispayment":{
                    required:"请选择支付状态"
                }

            }

        })


        if ($.validator) {
            $.validator.prototype.elements = function () {
                var validator = this,
                    rulesCache = {};
                return $(this.currentForm)
                    .find("input, select, textarea")
                    .not(":submit, :reset, :image, [disabled]")
                    .not(this.settings.ignore)
                    .filter(function () {
                        if (!this.name && validator.settings.debug && window.console) {
                            console.error("%o has no name assigned", this);
                        }
                        rulesCache[this.name] = true;
                        return true;
                    });
            }
        }



    })


</script>

<script type="text/javascript">

    function addchoice(){


      //  var firsttr = document.getElementById("hidfirsttr")
        var firsttr = $(" #hidfirsttr:hidden").get(0)

        var copyfirst = firsttr.cloneNode(true);
        copyfirst.removeAttribute("id")
        copyfirst.removeAttribute("hidden")
        copyfirst.setAttribute("class","addtr")

        copyfirst.lastElementChild.lastElementChild.innerHTML="0"
        $(copyfirst).insertBefore($("#lasttr"))

    }


    function delchoice(){

        $('.addtr:last').remove();
        totalprice();

    }



    function change(obj) {
        var skillid = parseFloat(obj.value)
        if (isNaN(skillid)) {
            var pricespan = obj.parentElement.parentElement.lastElementChild.lastElementChild
            pricespan.innerHTML = "0"
        } else {
            var pricespan = obj.parentElement.parentElement.lastElementChild.lastElementChild
            $.post("${ctx}/order/getpricebyskillid/" + skillid, function (result) {
               // alert(result.msg);
                if (result.code == 10000) {
                    var price = parseInt(result.data)
                    pricespan.innerHTML = "" + price

                }
            }, "json")

        }
        totalprice();

        $.post("${ctx}/order/getstaffsbyskillid/" + skillid, function (result) {


            // alert(result.msg);
            if (result.code == 10000) {


                var aimselect = obj.parentElement.nextElementSibling.firstElementChild
                var selectnum = aimselect.children.length



                for (let i = 0; i < selectnum; i++) {
                    aimselect.removeChild(aimselect.firstElementChild)
                }

                var option0 = document.createElement("option");
                $(option0).val("");
                $(option0).text("请选择");
                aimselect.append(option0);

                for (let x of result.data) {

                    var option = document.createElement("option");
                    //转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
                    $(option).val(x.staffid);
                    //给option的text赋值,这就是你点开下拉框能够看到的东西
                    $(option).text(x.staffname);
                    //获取select 下拉框对象,并将option添加进select
                    aimselect.append(option);

                }


            }

        })





    }


    function totalprice() {
        var skillids = [];

        $("select[name='skillid']").each(function (j, item) {
            skillids.push(document.getElementsByName("skillid")[j].value);
        });


        $.ajax({
            url: "${ctx}/order/gettotalprice",
            type: "post",
            traditional: true,
            data: {"skillids": skillids},
            dataType: "json",
            success: function (result) {
              //  alert(result.msg)
                if (result.code == 10000) {
                    var totalprice = parseInt(result.data)
                    var totalspan = document.getElementById("cost")
                    totalspan.innerHTML = "" + totalprice

                }
            },
            error: function () {
                alert("请联系管理员")
            },


        })


    }



</script>
<style type="text/css">
    .myinput {
        width: 200px;
    }

  /*  #hidfirsttr {
        !*display:none*!
    }*/

    .mytr {
        border-top: 2px solid #dfc9b2;
    }
</style>
</body>
</html>
